<template>
  <div>
    <div class="goods" >
      <div class="menu-wrapper">
        <ul>
          <!-- current动态样式确定current  currentIndex-->
          <li
            class="menu-item"
            v-for="(good, index) in goods"
            :key="index"
            :class="{ current: index===currentIndex}"
            @click="clickMenuItem(index)"
          >
            <span class="text bottom-border-1px">
              <img class="icon" :src="good.icon" v-if="good.icon" />
              {{ good.name }}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper">
        <ul ref="foodsUl">
          <li
            class="food-list-hook"
            v-for="(good, index) in goods"
            :key="index" 
           
>
            <h1 class="title">{{ good.name }}</h1>
            <ul >
              <li
                class="food-item bottom-border-1px"
                v-for="(food, index) in good.foods"
                :key="index"
                 @click="showFood(food)"
              >
                <div class="icon">
                  <img width="57" height="57" :src="food.icon" />
                </div>
                <div class="content">
                  <h2 class="name">{{ food.name }}</h2>
                  <p class="desc">{{ food.description }}</p>
                  <div class="extra">
                    <span class="count">{{ food.sellCount }}</span>
                    <span>{{ food.rating }}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span>
                    <span class="old" v-if="food.oldPrice"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>
                  <div class="cartcontrol-wrapper">
                   <CartControl  :food='food' />
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      <ShopCart/>
      </div>
       <Food :food="food" ref="food" />
    </div>
  </div>
</template>






<script>
import { mapState } from "vuex"
import BScroll from "better-scroll"
import CartControl from '../../../components/CartControl/CartControl.vue'
import Food from '../../../components/Food/Food.vue'
import ShopCart from '../../../components/ShopCart/ShopCart.vue'

export default {
  data() {
    return {
      // 1右侧滑动的Y轴坐标（滑动过程实时变化），右侧滑动中实时收集scrollY的值
      scrollY: 0,
      tops: [], //2所有右侧分类li组成的数组(列表第一次显示后就不在变化),在列表第一次显示时收集
      food:{}//需要显示大图的food
      //
    }
  },
  mounted() {
    this.$store.dispatch("getShopGoods", () => {
      //数据更新后执行

      this.$nextTick(() => { //列表数据更新显示后执行
      
      this._initScroll()
      this._initTops()
    

      });

     
      
    });
  },
  computed: {
    ...mapState(["goods"]),

    //3计算得到当前分类的下标，currentIndex的计算逻辑
    currentIndex() {
      //得到相关的条件数据
        const {scrollY,tops}=this

      //根据条件计算产生结果
       const index = tops.findIndex((top,index)=>{
        //scrollY >=top  && scrollY <tops[index+1]
        return scrollY >=top  && scrollY < tops[index+1]
        
       })

      //返回结果
      return index
     

    },
  },
  methods:{
    //显示点击LI后的food
    showFood(food){
       //设置food
       console.log(food);
          this.food = food
       //显示food组件,调用子组件对象的方法（父组件调用子组件方法）
          this.$refs.food.toggleShow()
       
             },


     _initScroll(){ //初始化滚动条
             //列表显示之后创建
            
        new BScroll(".menu-wrapper",{
          scrollY:true,
          click:true
        });
       this.foodsScroll = new BScroll(".foods-wrapper",{
         probeType:2,  //惯性滑动不会触发  直接用3 就不需要ScrollEnd
         click: true
        });

        //给右侧列表绑定scroll监听
        this.foodsScroll.on('scroll',({x,y})=>{
          // console.log(x,y);
          this.scrollY = Math.abs(y)
          
          })
          //给右侧绑定滚动结束的监听scrollEnd
        this.foodsScroll.on('scrollEnd',({x,y})=>{
          // console.log('scrollEnd',x,y);
          this.scrollY = Math.abs(y)
          
          })
     },
          //初始化tops
     _initTops(){
      //1 初始化tops
      const tops = []
      let top=0
      tops.push(top)
      //2 收集
        //找到所有分类的li
      // const lis=this.$refs.foodsUl.getElementsByClassName('.food-list-hook')
      const lis = this.$refs.foodsUl.getElementsByClassName('food-list-hook');
      //  console.log(lis);
       
      //  [...lis].forEach(li =>{

      // })
      Array.prototype.slice.call(lis).forEach(li => {
        top += li.clientHeight
        tops.push(top)
      })


      // 3 更新tops
      this.tops = tops
      // console.log(tops);
     
     },
     clickMenuItem(index){
      // console.log(index);
      //用右侧的列表滑动到对应的位置
      const y = this.tops[index]
      //立即更新当前scrollY （让点击的分类项称为当前的分类）
      this.scrollY = y
      //平滑滚动右侧列表
      this.foodsScroll.scrollTo(0,-y,500)
     }
     
  },

 components:{
   CartControl,
   Food,
   ShopCart
 }


};
</script>



<style lang="scss" scoped>
@import "../../../common/style/style.scss";
.goods {
  display: flex;
  position: absolute;
  top: 195px;
  bottom: 46px;
  width: 100%;
  background: #fff;
  overflow: hidden;
}

.menu-wrapper {
  flex: 0 0 80px;
  width: 80px;
  background: #f3f5f7;
}

.menu-item {
  display: table;
  height: 54px;
  width: 56px;
  padding: 0 12px;
  line-height: 14px;
  &.current {
    position: relative;
    z-index: 10;
    margin-top: -1px;
    background: #fff;
    color: $green;
    font-weight: 700;
  }
}
.text {
  border: none();
}

.icon {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 12px;
  margin-right: 2px;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.text {
  display: table-cell;
  width: 56px;
  vertical-align: middle;
  @include bottom-border-1px(rgba(7, 17, 27, 0.1));
  font-size: 12px;
}

.foods-wrapper {
  flex: 1;
}

.title {
  padding-left: 14px;
  height: 26px;
  line-height: 26px;
  border-left: 2px solid #d9dde1;
  font-size: 12px;
  color: rgb(147, 153, 159);
  background: #f3f5f7;
}

.food-item {
  display: flex;
  margin: 18px;
  padding-bottom: 12px;
  @include bottom-border-1px(rgba(7, 17, 27, 0.1));
  &:last-child {
    border: none();
    margin-bottom: 0;
  }
}

.icon {
  flex: 0 0 57px;
  margin-right: 10px;
}

.content {
  flex: 1;
}

.name {
  margin: 2px 0 8px 0;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  color: rgb(7, 17, 27);
}

.desc,
.extra {
  line-height: 10px;
  font-size: 10px;
  color: rgb(147, 153, 159);
}

.desc {
  line-height: 12px;
  margin-bottom: 8px;
}

.count {
  margin-right: 12px;
}

.price {
  font-weight: 700;
  line-height: 24px;
}

.now {
  margin-right: 8px;
  font-size: 14px;
  color: rgb(240, 20, 20);
}

.old {
  text-decoration: line-through;
  font-size: 10px;
  color: rgb(147, 153, 159);
}

.cartcontrol-wrapper {
  position: absolute;
  right: 0;
  bottom: 12px;
}
</style>